<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性布局的例子</title>
		<style type="text/css">
			.main .left,.main .right, .middle{
				border: 2px solid red;
				height: 300px;
				text-align: center;
				font-size: 30px;
				line-height: 100px;
				color: #000000;
				margin: 30px;
			}
			.main{
				padding: 20px;
				display: flex;
			}
			.left{flex: 1;}
			.middle{flex: 2;}
			.right{flex: 1;}
			.clear{clear: both;}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="left">左侧区域</div>
			<div class="middle">中间区域</div>
			<div class="right">右侧区域</div>
			<div class="clear"></div>
		</div>
	</body>
</html>
